<template>
  <div>
    <el-row>
      <el-col :span="4">
        <el-table :data="companyList" ref="companyTable" highlight-current-row @current-change="handleCompanyChange" style="width: 100%;border: 1px solid #e2e2e2;" height="calc(100vh - 50px)" :show-header="false">
          <el-table-column prop="companyName">
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="20">
        <el-card>
          <div>
            <el-form :inline="true" ref="form" :model="form" label-width="80px" class="demo-form-inline">
              <el-form-item label="组织部门">
                <el-input v-model="form.tenantName"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" class="mb-1" icon="el-icon-search" size="middle" @click="getOrgTree">
                  查询
                </el-button>
                <!-- <el-button type="primary" class="mb-15" icon="el-icon-refresh" size="middle" @click="onRefresh">
                  重置
                </el-button> -->
                <el-button type="primary" class="mb-15" icon="el-icon-plus" size="middle" @click="changeDialogStatus(true)">
                  新增部门
                </el-button>
              </el-form-item>
            </el-form>
          </div>
          <el-table :data="orgTableData" border style="width: 100%;" height="calc(100vh - 160px)" row-key="id" default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column prop="level" label="级别" width="150" show-overflow-tooltip="">
              <template slot-scope="scope">
                {{ getLevel(scope.row.level) }}
              </template>
            </el-table-column>
            <el-table-column prop="orgName" label="部门名称">
            </el-table-column>
            <el-table-column prop="status" label="状态" width="150">
              <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.status==='0'">正常</el-tag>
                <el-tag type="danger" v-else>停用</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="sort" label="排序" width="150"></el-table-column>
            <el-table-column prop="updateTime" label="修改时间" width="180"></el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
              <template slot-scope="scope">
                <el-button @click="editItem(scope.row)" type="text" size="small">编辑</el-button>
                <el-button @click="deleteItem(scope.row)" type="text" size="small">删除</el-button>
                <el-button @click="allocRole(scope.row)" type="text" size="small">分配角色</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <org-info-comp :isShow="isShowDialog" :company="currentCompany" :item="orgItem" @changeDialogStatus="changeDialogStatus" />
      </el-col>
    </el-row>
    <el-dialog title="提示" :visible.sync="isShowDelete" width="30%">
      <span>该操作将会删除该部门信息，确定是否进行删除？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowDelete = false">取 消</el-button>
        <el-button type="primary" @click="confirmDelete">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import OrgInfoComp from './components/orginfocomp.vue'
import { getCompanyList } from "@/api/company";
import { getOrgTree, deleteOrg } from "@/api/organization";
export default {
  components: {
    OrgInfoComp
  },
  data () {
    return {
      form: {
        fileName: '',
        transStatus: ''
      },
      orgTableData: [],
      isShowDialog: false,
      isShowDelete: false,
      companyList: [],
      currentCompany: null,
      orgItem: undefined
    }
  },
  mounted () {
    this.getCompanyList()
  },
  methods: {
    getCompanyList () {
      getCompanyList().then((res) => {
        if (res.status === 200) {
          this.companyList = res.data;
          this.setCurrentCompany(this.companyList[0]);
          this.getOrgTree()
        } else {
          this.$message(res.message);
        }
      });
    },
    setCurrentCompany (row) {
      this.currentCompany = row
      this.$refs.companyTable.setCurrentRow(row);
    },
    handleCompanyChange (val) {
      this.currentCompany = val;
      this.getOrgTree();
    },
    getOrgTree () {
      const param = { ...this.params, companyId: this.currentCompany.id, ...this.form }
      getOrgTree(param).then((res) => {
        if (res.status === 200) {
          this.orgTableData = res.data;
        } else {
          this.$message(res.message);
        }
      });
    },
    getLevel (value) {
      const levelV = ['一级', '二级', '三级', '四级', '五级', '六级', '七级', '八级', '九级', '十级', '十一级', '十二级', '十三级', '十四级', '十五级', '十六级']
      return levelV[value]
    },
    changeDialogStatus (status) {
      if (status === "success") {
        this.isShowDialog = false
        this.getOrgTree()
      } else {
        this.orgItem = undefined
        this.isShowDialog = status
      }
    },
    editItem (row) {
      this.orgItem = row
      this.isShowDialog = true
    },
    deleteItem (row) {
      this.orgItem = row
      this.isShowDelete = true
    },
    confirmDelete () {
      const param = { id: this.orgItem.id }
      deleteOrg(param).then((res) => {
        this.isShowDelete = false
        this.getOrgTree()
        if (res.status === 200) {
          this.$message.success("操作成功");
        } else {
          this.$message.error("操作失败，请重试");
        }
      });
    },
    allocRole (row) {
      this.$router.push(`/org/alloc/role?orgId=${row.id}`)
    }
  },
}
</script>

<style scoped>
::v-deep .el-table__body tr.current-row > td.el-table__cell,
.el-table__body tr.selection-row > td.el-table__cell {
  background-color: white !important;
  color: blue !important;
}
</style>